<template>
  <el-container>
    <el-aside class="layout-aside" width="200">
      <div class="logo">
        <img src="/static/img/logo.png"/>
      </div>
      <span style="margin-left:20px;color:#ffffff;">版本：2022/02/17</span>
      <slot name="layout-aside">
        <el-menu
          class="layout-aside-menu admin-left-list"
          background-color="#243743"
          text-color="#ffffff"
        >
          <router-link to="/dashboard">
            <el-menu-item index="1">
              <i class="fa fa-home"></i>主页
            </el-menu-item>
          </router-link>
          <router-link v-if="accountEnv.isAccess(['ADMIN','UNBIND_VD.MODEL'])" to="/unvds">
            <el-menu-item index="2">
              <i class="far fa-star"></i>未处理VD
            </el-menu-item>
          </router-link>

          <router-link v-if="accountEnv.isAccess(['ADMIN','VD.MODEL'])" to="/vds">
            <el-menu-item index="3">
              <i class="fas fa-star"></i>VD管理
            </el-menu-item>
          </router-link>
          <el-submenu index="4" v-if="accountEnv.isAccess(['ADMIN','HOST.MODEL','UNBIND_HOST.MODEL','ACCELERATE.MODEL'])">
            <template slot="title" ><i class="fas fa-credit-card"></i>主机及加速</template>
            <router-link v-if="accountEnv.isAccess(['ADMIN','UNBIND_HOST.MODEL'])" to="/unbind_servers">
              <el-menu-item index="4-1">
                <i class="fas fa-desktop"></i>未绑定主机
              </el-menu-item>
            </router-link>
            <router-link v-if="accountEnv.isAccess(['ADMIN','HOST.MODEL'])" to="/servers">
              <el-menu-item index="4-2">
                <i class="fas fa-desktop"></i>主机管理
              </el-menu-item>
            </router-link>
            <router-link v-if="accountEnv.isAccess(['ADMIN','ACCELERATE.MODEL'])" to="/accelerate_servers">
              <el-menu-item index="4-3">
                <i class="fas fa-desktop"></i>加速服务器
              </el-menu-item>
            </router-link>
            <router-link v-if="accountEnv.isAccess(['ADMIN','ACCELERATE.MODEL'])" to="/main_second_accelerate_servers">
              <el-menu-item index="4-4">
                <i class="fas fa-desktop"></i>主从加速服务器
              </el-menu-item>
            </router-link>
          </el-submenu>

          <router-link v-if="accountEnv.isAccess(['ADMIN','ACCOUNT.MODEL'])" to="/accounts">
            <el-menu-item index="5">
              <i class="fas fa-portrait"></i>用户管理
            </el-menu-item>
          </router-link>
          <!--<router-link v-if="accountEnv.isAccess(['ADMIN','SUBACCOUNT.MODEL'])" to="/subaccounts">-->
            <!--<el-menu-item index="6">-->
              <!--<i class="el-icon-setting"></i>-->
              <!--<span slot="title">子账号管理</span>-->
            <!--</el-menu-item>-->
          <!--</router-link>-->
          <el-submenu index="6" v-if="accountEnv.isAccess(['ADMIN','ORDER.MODEL','ORDER_RENEW.MODEL','ORDER_UNTREATED_RENEW.MODEL'])">
            <template slot="title"><i class="fas fa-credit-card"></i>订单</template>
            <router-link v-if="accountEnv.isAccess(['ADMIN','ORDER.MODEL'])" to="/orders">
              <el-menu-item index="6-1">
                <i class="fa fa-list"></i>订单管理
              </el-menu-item>
            </router-link>
            <router-link v-if="accountEnv.isAccess(['ADMIN','ORDER_RENEW.MODEL'])" to="/orders_renew">
            <el-menu-item index="6-2">
              <i class="fa fa-list"></i>续费订单
            </el-menu-item>
            </router-link>
            <router-link v-if="accountEnv.isAccess(['ADMIN','ORDER_UNTREATED_RENEW.MODEL'])" to="/orders_untreated_renew">
              <el-menu-item index="6-3">
                <i class="fa fa-list"></i>未处理续费订单
              </el-menu-item>
            </router-link>
            <router-link v-if="accountEnv.isAccess(['ADMIN','ORDER.MODEL'])" to="/financial_report">
              <el-menu-item index="6-4">
                <i class="fa fa-list"></i>财务报表
              </el-menu-item>
            </router-link>
          </el-submenu>
          <el-submenu index="7" v-if="accountEnv.isAccess(['ADMIN','VDCARD_ACTIVITY.MODEL','VDCARD_CREATOR.MODEL','VDCARD.MODEL'])">
            <template slot="title"><i class="fas fa-credit-card"></i>VD卡</template>
            <router-link v-if="accountEnv.isAccess(['ADMIN','VDCARD_ACTIVITY.MODEL'])" to="/vdcard_activity">
              <el-menu-item index="7-1">VD卡活动</el-menu-item>
            </router-link>
            <router-link v-if="accountEnv.isAccess(['ADMIN','VDCARD_CREATOR.MODEL'])" to="/vdcardcreators">
              <el-menu-item index="7-2">渠道VD卡</el-menu-item>
            </router-link>
            <router-link v-if="accountEnv.isAccess(['ADMIN','VDCARD.MODEL'])" to="/vdcards">
              <el-menu-item index="7-3">自建VD卡</el-menu-item>
            </router-link>
          </el-submenu>
          <el-submenu index="8" v-if="accountEnv.isAccess(['ADMIN','DISCOUNT_COUPON_TEMPLATE.MODEL','DISCOUNT_COUPON.MODEL'])">
            <template slot="title"><i class="fas fa-credit-card"></i>优惠券</template>
            <router-link v-if="accountEnv.isAccess(['ADMIN','DISCOUNT_COUPON_TEMPLATE.MODEL'])" to="/discount_coupon_templates">
              <el-menu-item index="8-1">优惠券模板</el-menu-item>
            </router-link>
            <router-link v-if="accountEnv.isAccess(['ADMIN','DISCOUNT_COUPON.MODEL'])" to="/discount_coupons">
              <el-menu-item index="8-2">优惠券</el-menu-item>
            </router-link>
            <router-link v-if="accountEnv.isAccess(['ADMIN','DISCOUNT_COUPON.MODEL'])" to="/discount_coupon_exchanges">
              <el-menu-item index="8-2">优惠券兑换码</el-menu-item>
            </router-link>
          </el-submenu>
          <el-submenu index="9" v-if="accountEnv.isAccess(['ADMIN','AGENT.MODEL','AGENTREQUEST.MODEL','WITHDRAW.MODEL','CHANNEL.MODEL'])">
            <template slot="title"><i class="fas fa-user-tie"></i>代理&渠道</template>
            <router-link v-if="accountEnv.isAccess(['ADMIN','AGENT.MODEL'])" to="/agents">
              <el-menu-item index="9-1">代理管理</el-menu-item>
            </router-link>
            <router-link v-if="accountEnv.isAccess(['ADMIN','AGENTREQUEST.MODEL'])" to="/agentrequests">
              <el-menu-item index="9-2">代理申请管理</el-menu-item>
            </router-link>
            <router-link v-if="accountEnv.isAccess(['ADMIN','WITHDRAW.MODEL'])" to="/withdraws">
              <el-menu-item index="9-3">提现管理</el-menu-item>
            </router-link>
            <router-link v-if="accountEnv.isAccess(['ADMIN','CHANNEL.MODEL'])" to="/channel">
              <el-menu-item index="9-4">渠道管理</el-menu-item>
            </router-link>
          </el-submenu>
          <el-submenu index="12" v-if="accountEnv.isAccess(['ADMIN','ACCOUNT_DISCOUNTS.MODEL'])">
            <template slot="title"><i class="fas fa-user-tie"></i>用户优惠</template>
            <router-link v-if="accountEnv.isAccess(['ADMIN','ACCOUNT_DISCOUNTS.MODEL'])" to="/accountdiscounts">
              <el-menu-item index="12-1">用户优惠</el-menu-item>
            </router-link>
          </el-submenu>
          <el-submenu index="13" v-if="accountEnv.isAccess(['FINANCE.MODEL'])">
            <template slot="title"><i class="fas fa-chart-pie"></i>数据统计</template>
            <router-link v-if="accountEnv.isAccess(['FINANCE.MODEL'])" to="/orderstatistics">
              <el-menu-item index="13-1">订单数据</el-menu-item>
            </router-link>
          </el-submenu>
          <el-submenu index="10" v-if="accountEnv.isAccess(['ADMIN','PRODUCT.MODEL','ACTIVITY.MODEL','LOGIN_LOG.MODEL','COUPON.MODEL','INVOICE.MODEL','APPVER.MODEL','LOGIN_LOG.MODEL'])">
            <template slot="title"><i class="fa fa-cogs"></i>管理</template>
            <router-link v-if="accountEnv.isAccess(['ADMIN','PRODUCT.MODEL'])" to="/product">
              <el-menu-item index="10-1">商品管理</el-menu-item>
            </router-link>
            <router-link v-if="accountEnv.isAccess(['ADMIN','ACTIVITY.MODEL'])" to="/activity">
              <el-menu-item index="10-2">活动管理</el-menu-item>
            </router-link>
            <router-link v-if="accountEnv.isAccess(['ADMIN'])" to="/admins">
              <el-menu-item index="10-3">管理员管理</el-menu-item>
            </router-link>
            <router-link v-if="accountEnv.isAccess(['ADMIN','LOGIN_LOG.MODEL'])" to="/loginlog">
              <el-menu-item index="10-4">登录日志</el-menu-item>
            </router-link>

            <router-link v-if="accountEnv.isAccess(['ADMIN','COUPON.MODEL'])" to="/coupons">
              <el-menu-item index="10-5">优惠券管理</el-menu-item>
            </router-link>
            <router-link v-if="accountEnv.isAccess(['ADMIN','INVOICE.MODEL'])" to="/invoice">
              <el-menu-item index="10-6">开票管理</el-menu-item>
            </router-link>
            <router-link v-if="accountEnv.isAccess(['ADMIN','APPVER.MODEL'])" to="/appver">
              <el-menu-item index="10-7">发布管理</el-menu-item>
            </router-link>
            <router-link v-if="accountEnv.isAccess(['ADMIN','LOGIN_LOG.MODEL'])" to="/devices">
              <el-menu-item index="10-8">设备记录</el-menu-item>
            </router-link>
<!--            <router-link v-if="accountEnv.isAccess(['ADMIN','ACTIVITYSHOW.MODEL'])" to="/activityshow">-->
<!--              <el-menu-item index="8-9">活动管理</el-menu-item>-->
<!--            </router-link>-->
            <router-link  v-if="accountEnv.isAccess(['ADMIN'])" to="/vdVisitLog">
              <el-menu-item index="10-10">VD最后访问记录</el-menu-item>
            </router-link>
          </el-submenu>

        </el-menu>
      </slot>
    </el-aside>
    <el-container class="layout-main-container">
      <el-header class="layout-main-header">
        <slot name="breadcrumb">
          <h1 class="layout-title">{{title}}</h1>
        </slot>
        <div class="layout-search-form">
          <slot name="layout-search-form">

          </slot>
        </div>
        <div class="accout-info">
          <slot name="accoutinfo">
            <el-dropdown @command="handleCommand">
              <span class="el-dropdown-link">
                <strong class="accout-info-focus">{{account.name}}</strong>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="logout">注销
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </slot>
        </div>
      </el-header>
      <el-main class="layout-main-body">
        <slot></slot>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>

  import Session from 'framework/Session'

  export default {
    name: "ManagerLayout",
    data() {
      const accountModel = Session.get('account').account;
      return {
        accountEnv: this.$environments.use('account'),
        account: accountModel,
      }
    },
    mounted() {
      // this.account = accountModel;
    },

    props: {
      title: {
        default: null,
      }
    },
    methods: {
      handleCommand(command) {
        console.log(command)
        this[command]()
      },
      logout() {
        this.$environments.use('account').commit('clear');
        this.$router.push('/login');
      }
    }
  }
</script>

<style scoped lang="scss">
  $aside-width: 200px;
  .admin-left-list {
    li {
      svg {
        margin: 0 10px 0 5px;
        width: 20px;
        opacity: .7;
      }
    }
  }
  .logo {
    background: {
      color: #243743;
    }
    margin: 0 auto;
    padding: 10px 10px;
  }

  .layout-aside {
    background: {
      color: #243743;
    }
    position: fixed;
    height: 100%;
    z-index: 10;
    width: $aside-width;
    .layout-aside-menu {
      border: none;
    }
  }

  .layout-main-container {
    margin: {
      left: $aside-width;
    }
    .layout-main-header {
      z-index: 10;
      position: fixed;
      width: calc(100% - #{$aside-width});
      left: $aside-width;
      border: {
        bottom: solid #e8eaeb 1px;
      }
      background: {
        color: #ffffff;
      }
      .layout-breadcrumb {
        margin: 20px 0;
      }
      .layout-title {
        position: absolute;
        left: 20px;
        /*top: 15px;*/
        bottom: 0;
      }
      .layout-search-form {
        left: 150px;
        position: absolute;
        top: 8px;
        bottom: 0;
      }
    }
    .layout-main-body {
      margin-top: 60px;
      background: {
        color: #f3f4f5;
      }
    }
    .accout-info {
      text-align: center;
      height: 59px;
      line-height: 59px;
      position: absolute;
      right: 0px;
      border: {
        left: 1px solid #e8eaeb;
      }
      .accout-info-focus {
        display: block;
        padding: 0 50px;
        cursor: pointer;
      }
    }
  }
</style>
